<template>
    <div>
        <div id="form-div">
            <p id="form-title">奖品信息</p>
            <div>
                <span>奖品名称：</span>
                <el-input
                        class="input-name info-input"
                        placeholder="请输入奖品的名称"
                        v-model="goodsName"
                        clearable>
                </el-input>
            </div>
            <div>
                <span>奖品所属：</span>
                <el-input
                        class="input-QQ info-input"
                        placeholder="请输入该奖品所有者的QQ"
                        v-model="qq"
                        clearable>
                </el-input>
            </div>
            <div>
                <span>抽奖时间：</span>
                <el-date-picker
                        class="input-date info-input"
                        v-model="date"
                        type="date"
                        format="yyyy-MM-dd'T'HH:mm:ss"
                        value-format="yyyy-MM-dd'T'HH:mm:ss"
                        placeholder="选择日期">
                </el-date-picker>
            </div>
            <div>
                <span>对应农历：</span>
                <el-input
                        class="input-QQ info-input"
                        placeholder="输入农历（可以不填）"
                        v-model="lunar"
                        clearable>
                </el-input>
            </div>
            <el-button @click="submitGoods" type="primary">提交</el-button>
        </div>

        <!-- 列表展示历史奖品以及中奖用户 -->
        <div id="goods-table-div">
            <span id="goods-table-title">所有奖品</span>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    stripe
            >
                <el-table-column
                        prop="name"
                        label="奖品名称"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="开奖日期"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="qq"
                        label="中奖QQ"
                        min-width="100">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import {addOrUpdateGoods, pageGoods} from "../request/api";

    export default {
        name: "AddGoods",
        data() {
            return {
                goodsName: '',
                date: '',
                qq: '',
                lunar: '',
                tableData: []
            }
        },
        methods: {
            submitGoods() {
                let data = {}
                data.name = this.goodsName
                data.provider = this.qq
                data.lunar = this.lunar
                data.publishTime = this.date
                addOrUpdateGoods(data).then((res) => {
                    console.log(res)
                    this.$message.info("添加成功")
                    this.pageGoods()
                }).catch((err) => {
                    this.$message.error(err)
                    console.error(err)
                })
            },
            pageGoods() {
                let page = {}
                page.current = 1
                page.size = 10
                pageGoods(page).then((res) => {
                    let records = res.records
                    let data = []
                    console.log(records)
                    for (let record of records) {
                        console.log(record)
                        let item = {}
                        item.name = record.name
                        if(record.publishTime !== undefined) {
                            let date = new Date(record.publishTime)
                            item.date = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate()
                        }
                        item.qq = record.winner
                        if (item.qq === undefined || item.qq === null || item.qq.length === 0) {
                            item.qq = '未开奖'
                        }
                        data.push(item);
                    }
                    console.log(data)
                    this.tableData = data
                })
            },
        },
        created() {
            this.pageGoods()
        }
    }
</script>

<style scoped lang="less">
    #form-title {
        font-weight: bold;
        font-size: 30px;
        color: #606266;
    }

    #form-div {
        width: 80%;
        margin-left: 10%;

        .info-input {
            margin-bottom: 20px;
            width: 70%;
        }

        .input-name {
        }

        .input-date {
        }

    }

    #goods-table-div {
        width: 80%;
        margin-top: 20px;
        margin-left: 10%;

        #goods-table-title {
            font-weight: bold;
            font-size: 20px;
            color: #606266;
        }
    }
</style>